<template>
    <div class="gywm-box">
        <div class="gywm-banner" v-if="rjxtList.length > 0" v-for="(item, index) in rjxtList" :key="index">
            <template v-if="item.position === 'banner'">
                <img :src="item.image_url" alt="">
            </template>
        </div>
        <div class="gywm-content">
            <div class="gywm-content-box">
                <div class="gywm-left">
                    <template v-if="imgArr.length > 0">
                        <img :src="imgArr[0].image_url" alt="">
                    </template>
                </div>
                <div class="gywm-right">
                    <h2>企业简介</h2>
                    <el-divider content-position="center"></el-divider>
                    <p>
                        深圳市华胜迅科技有限公司，专注于公交、旅游行业电子产品研发、生产与销售。是国内专业提供导览机租赁、公交报站器与多语言导览系统设备的企业，秉持科技为本，服务至上。产品畅销全球多个国家和地区，广泛应用于城市观光、影院、游船、观光飞机、会议等领域。
                        <br><br>
                        华胜迅拥有强大的研发和技术支持团队，所有软硬件产品均由公司自助研发，并提供持续的售后服务技术支持。定制服务以满足客户们的不同需求。
                        <br><br>
                        华胜迅拥有一整套严格的质量控制体系，原材料采购、产品生产、测试和安装等每个环节都实行严格管控。产品品质均进行高要求性能测试，品质保障。
                    </p>
                </div>
            </div>
            <div class="gywm-card">
                <el-card>
                    <template v-if="imgArr1.length > 0">
                        <img :src="imgArr1[0].image_url" alt="">
                    </template>
                    <template #footer>
                        <div class="gywm-card-footer">
                            <div class="rjxt-card-title">
                                <p style="text-align: center;">数据分析</p>
                            </div>
                            <div class="rjxt-card-p">
                                <p style="text-align: center;">智能导览机<br>自助租赁机<br>多语言导览<br>车载娱乐影音<br></p>
                            </div>
                        </div>
                    </template>
                </el-card>
                <el-card>
                    <template v-if="imgArr1.length > 0">
                        <img :src="imgArr1[1].image_url" alt="">
                    </template>
                    <template #footer>
                        <div class="gywm-card-footer">
                            <div class="rjxt-card-title">
                                <p style="text-align: center;">软件</p>
                            </div>
                            <div class="rjxt-card-p">
                                <p style="text-align: center;">内容编辑<br>设备管理<br>数据统计</p>
                            </div>
                        </div>
                    </template>
                </el-card>
                <el-card>
                    <template v-if="imgArr1.length > 0">
                        <img :src="imgArr1[2].image_url" alt="">
                    </template>
                    <template #footer>
                        <div class="gywm-card-footer">
                            <div class="rjxt-card-title">
                                <p style="text-align: center;">内容制作</p>
                            </div>
                            <div class="rjxt-card-p" style="text-align: center;">
                                <p style="text-align: center;">TTS语言合成<br>地图导入<br>设定路线<br></p>
                            </div>
                        </div>
                    </template>
                </el-card>
                <el-card>
                    <template v-if="imgArr1.length > 0">
                        <img :src="imgArr1[3].image_url" alt="">
                    </template>
                    <template #footer>
                        <div class="gywm-card-footer">
                            <div class="rjxt-card-title">
                                <p style="text-align: center;">技术支持</p>
                            </div>
                            <div class="rjxt-card-p" style="text-align: center;">
                                <p style="text-align: center;">疑问解答<br>安装教程<br>持续更新程序</p>
                            </div>
                        </div>
                    </template>
                </el-card>
            </div>
            <!-- <div class="gywm-content-box2">
                <div class="gywm-content-top">
                    <h2>企业简介</h2>
                    <h3>COMPANY INTRODUCTION</h3>
                </div>
                <div class="gywm-content-bottom" v-if="imgArr2.length > 0">
                    <template v-for="(item, index) in imgArr2" :key="index">
                        <img :src="item.image_url" alt="">
                    </template>
                </div>
                <div class="gywm-content-bottom-button">
                    <el-button>全球客户</el-button>
                </div>
            </div> -->
            <!-- <template v-if="screenWidth > 768">
                <div class="gywm-content-box3">
                    <div class="gywm-content-top">
                        <h2>企业简介</h2>
                        <h3>COMPANY INTRODUCTION</h3>
                    </div>
                    <div class="gywm-content-bottom">
                        <p>
                            我们坚持站在客户的角度思考问题，用领先的互动策略思考模式打破常规。
                            <br>
                            我们坚信每一个成功项目都是良好合作的成果，我们共同思考和创新，帮助客户寻找接近目标受众最佳互动解决方案。
                        </p>
                    </div>
                    <div class="gywm-content-bottom-button">
                        <template v-if="imgArr3.length > 0">
                            <img :src="imgArr3[0].image_url" alt="">
                        </template>
                    </div>
                </div>
            </template> -->
            <!-- <div class="gywm-steps">
                <el-steps direction="vertical">
                    <el-step status="process">
                        <template #title>
                            <div class="gywm-steps-title">
                                质量保障
                            </div>
                        </template>
                        <template #description>
                            <div class="gywm-steps-content">
                                <span>设备出厂后，由我们有长期合作的公司运输，设备安全送达后，将由技术人员逐一检测排查设备功能，确保每台设备无质量问题且功能正常。</span>
                                <template v-if="imgArr4.length > 0">
                                    <img :src="imgArr4[0].image_url" alt="">
                                </template>
                            </div>
                        </template>
                    </el-step>
                    <el-step class="left-align" status="process">
                        <template #title>
                            <div class="gywm-steps-title">
                                质量保障
                            </div>
                        </template>
                        <template #description>
                            <div class="gywm-steps-content">
                                <span>设备出厂后，由我们有长期合作的公司运输，设备安全送达后，将由技术人员逐一检测排查设备功能，确保每台设备无质量问题且功能正常。</span>
                                <template v-if="imgArr4.length > 0">
                                    <img :src="imgArr4[0].image_url" alt="">
                                </template>
                            </div>
                        </template>
                    </el-step> <el-step status="process">
                        <template #title>
                            <div class="gywm-steps-title">
                                质量保障
                            </div>
                        </template>
                        <template #description>
                            <div class="gywm-steps-content">
                                <span>设备出厂后，由我们有长期合作的公司运输，设备安全送达后，将由技术人员逐一检测排查设备功能，确保每台设备无质量问题且功能正常。</span>
                                <template v-if="imgArr4.length > 0">
                                    <img :src="imgArr4[1].image_url" alt="">
                                </template>
                            </div>
                        </template>
                    </el-step> <el-step class="left-align" status="process">
                        <template #title>
                            <div class="gywm-steps-title">
                                质量保障
                            </div>
                        </template>
                        <template #description>
                            <div class="gywm-steps-content">
                                <span>设备出厂后，由我们有长期合作的公司运输，设备安全送达后，将由技术人员逐一检测排查设备功能，确保每台设备无质量问题且功能正常。</span>
                                <template v-if="imgArr4.length > 0">
                                    <img :src="imgArr4[2].image_url" alt="">
                                </template>
                            </div>
                        </template>
                    </el-step> <el-step status="process">
                        <template #title>
                            <div class="gywm-steps-title">
                                质量保障
                            </div>
                        </template>
                        <template #description>
                            <div class="gywm-steps-content">
                                <span>设备出厂后，由我们有长期合作的公司运输，设备安全送达后，将由技术人员逐一检测排查设备功能，确保每台设备无质量问题且功能正常。</span>
                                <template v-if="imgArr4.length > 0">
                                    <img :src="imgArr4[3].image_url" alt="">
                                </template>
                            </div>
                        </template>
                    </el-step>
                </el-steps>
            </div> -->
            <div class="qjkh-box">
                <div class="gywm-content-top">
                    <h2>全球客户</h2>
                    <el-divider content-position="center"></el-divider>
                </div>
                <div class="qjkh-box-bottom" v-if="imgArr5.length > 0">
                    <template v-for="(item, index) in imgArr5" :key="index">
                        <img :src="item.image_url" alt="">
                    </template>
                </div>
                <div class="gywm-content-bottom-button">
                    <el-button @click="$router.push('/qqkh')">更多客户</el-button>
                </div>
            </div>
            <template v-if="screenWidth > 768">
                <div class="gywm-content-box4">
                    <div class="gywm-content-top">
                        <h2>联系我们</h2>
                        <h3>COMPANY INTRODUCTION</h3>
                    </div>
                    <div class="lxwm-content">
                        <div class="lxwm-content-left">
                            <span>联系表格--华胜讯科技</span>
                        </div>
                        <div class="lxwm-form">
                            <!-- 表单 -->
                            <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="姓名" prop="name">
                                            <el-input v-model="form.name"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="公司" prop="company">
                                            <el-input v-model="form.company"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="邮箱" prop="email">
                                            <el-input v-model="form.email"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="电话" prop="phone">
                                            <el-input v-model="form.phone"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-form-item label="您的需求" prop="needs">
                                    <el-checkbox-group v-model="form.needs">
                                        <el-checkbox label="多语言讲解系统"></el-checkbox>
                                        <el-checkbox label="车载娱乐系统"></el-checkbox>
                                        <el-checkbox label="智能公交报站器"></el-checkbox>
                                        <el-checkbox label="导览机租赁系统"></el-checkbox>
                                        <el-checkbox label="LED显示屏"></el-checkbox>
                                        <el-checkbox label="耳机"></el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                                <el-form-item label="留言" prop="message">
                                    <el-input type="textarea" v-model="form.message"></el-input>
                                    <el-text class="mx-1" size="small">*提交此表格,即同意将详细信息用于联系目的。</el-text>
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="submitForm">提交</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="lxwm-content-left">
                            <span>联系方式--华胜讯科技</span>
                        </div>
                        <div class="lxwm-tel-box">
                            <div class="lxwm-tel">
                                <div class="lxwm-tel-left">
                                    <span>电话：</span>
                                </div>
                                <div class="lxwm-tel-right">
                                    <span>+86 182 0755 8018</span>
                                </div>
                            </div>
                            <div class="lxwm-tel">
                                <div class="lxwm-tel-left">
                                    <span>邮箱：</span>
                                </div>
                                <div class="lxwm-tel-right">
                                    <span>Sandy@tamotec.com</span>
                                </div>
                            </div>
                            <div class="lxwm-tel">
                                <div class="lxwm-tel-left">
                                    <span>传真：</span>
                                </div>
                                <div class="lxwm-tel-right">
                                    <span>+86-755-29030953</span>
                                </div>
                            </div>
                            <div class="lxwm-tel">
                                <div class="lxwm-tel-left">
                                    <span>技术支持：</span>
                                </div>
                                <div class="lxwm-tel-right">
                                    <span>chen@tamotec.com</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </template>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { ElNotification } from 'element-plus'
import { getGywmList, addIntention } from '@/api/rjxt'

const form = reactive({
    name: '',
    company: '',
    email: '',
    phone: '',
    needs: [],
    message: ''
});

const rules = {
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    company: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
    email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
    needs: [{ type: 'array', required: true, message: '请选择至少一项需求', trigger: 'change' }],
    message: [{ required: true, message: '请输入留言', trigger: 'blur' }]
};

const formRef = ref(null);

const submitForm = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            addIntention({
                ...form
            }).then(res => {
                if (res.status === 200) {
                    ElNotification({
                        title: 'Success',
                        message: '提交成功',
                        type: 'success',
                    })
                } else {
                    ElNotification({
                        title: 'Error',
                        message: '提交失败',
                        type: 'error',
                    })
                }
                formRef.value.resetFields();
            })
        } else {
            console.log('Form validation failed');
            return false;
        }
    });
};

const rjxtList = ref([])
const imgArr = ref([])
const imgArr1 = ref([])
const imgArr2 = ref([])
const imgArr3 = ref([])
const imgArr4 = ref([])
const imgArr5 = ref([])

onMounted(() => {
    getGywmList().then(res => {
        rjxtList.value = res.data

        imgArr.value = rjxtList.value.filter(item => item.position === 'content')
        imgArr1.value = rjxtList.value.filter(item => item.position === 'content_01')
        imgArr2.value = rjxtList.value.filter(item => item.position === 'content_02')
        imgArr3.value = rjxtList.value.filter(item => item.position === 'content_03')
        imgArr4.value = rjxtList.value.filter(item => item.position === 'content_04')
        imgArr5.value = rjxtList.value.filter(item => item.position === 'content_05')
    })
})
</script>

<style scoped>
.el-divider--horizontal {
    margin: 0;
    border-top: 2px #409eff solid;
}

.el-card__body {
    img {
        max-width: 100%;
        height: auto;
        margin-bottom: 20px;
        margin-left: 3rem;
    }
}

@media screen and (max-width: 768px) {

    .lxwm-form {
        padding: 20px;
    }

    .el-form-item {
        margin-bottom: 20px;
    }

    .el-input,
    .el-checkbox-group {
        width: 100%;
    }

    .el-button {
        display: block;
        margin: 0 auto;
    }

    .lxwm-tel {
        display: flex;
        margin-left: 130px;
        margin-top: 50px;
    }

    .lxwm-tel-box {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        width: 100%;
        justify-content: flex-start;
    }

    .lxwm-content-left {
        margin: 20px 0px;

        span {
            display: block;
            font-size: 20px;
            font-weight: 600;
            color: #333;
        }
    }

    .lxwm-content {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
    }

    .demo-form-inline .el-input {
        --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
        --el-select-width: 220px;
    }

    .gywm-content-box4 {
        margin-top: 50px;
        padding: 0 20px;
    }

    .gywm-content-box2 {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        justify-content: center;
        margin-bottom: 50px;
    }

    .qjkh-box-bottom {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        align-content: center;
        justify-content: center;
        align-items: center;
        justify-items: center;
    }

    .qjkh-box-bottom img {
        margin-top: 34px;
        max-width: 100%;
        height: auto;
    }

    .qjkh-box {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .gywm-steps-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        align-content: center;
        margin-top: 15px;
    }

    .gywm-steps-content span {
        display: block;
        width: 200px;
        font-size: 14px;
        line-height: 1.75;
        color: #333;
    }

    .gywm-steps-content img {
        max-width: 100%;
        height: auto;
        margin-top: 15px;
        margin-bottom: 40px;
    }

    :deep(.el-step__title) {
        font-weight: bold;
        font-size: 30px;
    }

    :deep(.el-step__num) {
        display: none;
    }

    .gywm-steps {
        max-width: 300px;
        margin-top: 50px;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    :deep(.el-button) {
        border-radius: 0;
        width: 150px;
        height: 40px;
        border: 1px solid #000;
    }

    :deep(.el-button:hover) {
        background-color: #409eff;
        ;
        color: #fff;
    }

    .gywm-content-bottom-button {
        margin-top: 50px;
    }

    .gywm-content-bottom {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        margin-top: 47px;
        align-items: center;
        width: 100%;
        flex-wrap: wrap;
    }

    .gywm-content-bottom img {
        margin-top: 34px;
        margin-left: 15px;
    }

    .gywm-content-top h2 {
        font-size: 38px;
        font-weight: 600;
        color: #333;
        margin: 20px 0 10px;
    }

    .gywm-content-top h3 {
        font-size: 20px;
        font-weight: 600;
        color: #aaaaaa;
        margin: 0 0 10px;
    }


    .gywm-section-arrow {
        font-size: 20px;
        font-weight: normal;
        color: #999999;
        position: absolute;
        bottom: -30px;
        left: 90px;
        transition: background-color 0.3s, color 0.3s;
        background-color: transparent;
        padding: 5px;
        width: 60px;
    }

    .gywm-section-arrow:hover {
        color: #fff;
        /* 悬停时箭头变白色 */
        background-color: #000;
        /* 悬停时背景变黑色 */
    }

    .gywm-content-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        align-content: center;
    }

    .gywm-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        height: 400px;
    }

    .gywm-left img {
        padding-bottom: 30px;
    }

    .gywm-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;
        width: 300px;
    }

    .gywm-right h2 {
        font-size: 38px;
        font-weight: 600;
        color: #333;
        margin: 20px 0 10px;
    }

    .gywm-right h3 {
        font-size: 20px;
        font-weight: 600;
        color: #aaaaaa;
        margin: 0 0 10px;
    }

    .gywm-banner img {
        max-width: 100%;
        height: auto;
        margin-bottom: -25px;
    }

    .gywm-content {
        text-align: center;
        margin-bottom: 100px;
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        justify-content: center;
    }


    .gywm-content p {
        font-size: 16px;
        line-height: 1.7;
        color: #999999;
        width: 300px;
    }

    .el-card {
        margin-top: 30px;
    }

    .gywm-card-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        width: 200px;
    }

    .rjxt-card-title {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        height: 30px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .gywm-card-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        width: 200px;
    }

    .gywm-card {
        display: flex;
        height: 310px;
    }

    :deep(.el-card) {
        --el-card-border-color: #fff !important;
    }

    .rjxt-card-title {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        height: 30px;
        margin-top: -50px;
    }

    .rjxt-card-p {
        height: 120px;
        word-wrap: break-word;
        text-align: center;
        font-size: 14px;
        font-weight: normal;
        margin-top: 30px;
        line-height: 1.75;
        color: black;
    }

    .lxwm-form {
        padding: 20px;
    }

    .el-form-item {
        margin-bottom: 20px;
    }

    .el-input,
    .el-checkbox-group {
        width: 100%;
    }

    .el-button {
        display: block;
        margin: 0 auto;
    }

    .lxwm-tel {
        display: flex;
        margin-left: 130px;
        margin-top: 50px;
    }

    .lxwm-tel-box {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        width: 100%;
        justify-content: flex-start;
    }

    .lxwm-content-left {
        margin: 20px 0px;

        span {
            display: block;
            font-size: 20px;
            font-weight: 600;
            color: #333;
        }
    }

    .lxwm-content {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
    }

    .demo-form-inline .el-input {
        --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
        --el-select-width: 220px;
    }

    .gywm-content-box4 {
        margin-top: 50px;
        padding: 0 20px;
    }

    .gywm-content-box2 {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        justify-content: center;
        margin-bottom: 50px;
    }

    .qjkh-box-bottom {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
        width: 800px;
        justify-content: center;
        align-content: center;
        align-items: center;
        justify-items: center;
    }

    .qjkh-box-bottom img {
        margin-top: 34px;
        max-width: 100%;
        height: auto;
    }

    .qjkh-box {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .gywm-steps-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        align-content: center;
        margin-top: 15px;
    }

    .left-align {
        text-align: right;
    }

    :deep(.left-align .el-step__main) {
        margin-left: -440px;
        /* 调整这个值以适应你的布局 */
    }


    .gywm-steps-content span {
        display: block;
        width: 400px;
        font-size: 14px;
        line-height: 1.75;
        color: #333;
    }

    .gywm-steps-content img {
        width: 400px;
        height: 334px;
        margin-top: 15px;
        margin-bottom: 40px;
    }

    :deep(.el-step__title) {
        font-weight: bold;
        font-size: 30px;
    }

    :deep(.el-step__num) {
        display: none;
    }

    .gywm-steps {
        max-width: 600px;
        margin-top: 50px;
        margin-left: 436px;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    :deep(.el-button) {
        border-radius: 0;
        width: 150px;
        height: 40px;
        border: 1px solid #000;
    }

    :deep(.el-button:hover) {
        background-color: #409eff;
        ;
        color: #fff;
    }

    .gywm-content-bottom-button {
        margin-top: 50px;
    }

    .gywm-content-bottom {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        margin-top: 47px;
        align-items: center;
        width: 100%;
        flex-wrap: wrap;
    }

    .gywm-content-bottom img {
        margin-top: 34px;
        margin-left: 15px;
    }

    .gywm-content-top h2 {
        font-size: 38px;
        font-weight: 600;
        color: #333;
        margin: 50px 0 10px;
    }

    .gywm-content-top h3 {
        font-size: 20px;
        font-weight: 600;
        color: #aaaaaa;
        margin: 0 0 10px;
    }


    .gywm-section-arrow {
        font-size: 20px;
        font-weight: normal;
        color: #999999;
        position: absolute;
        bottom: -10px;
        left: 90px;
        transition: background-color 0.3s, color 0.3s;
        background-color: transparent;
        padding: 5px;
        width: 60px;
    }

    .gywm-section-arrow:hover {
        color: #fff;
        /* 悬停时箭头变白色 */
        background-color: #000;
        /* 悬停时背景变黑色 */
    }

    .gywm-content-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .gywm-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }

    .gywm-left img {
        max-width: 100%;
        height: auto;
        padding-bottom: 30px;
    }

    .gywm-right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-content: center;
        justify-content: flex-start;
        margin-left: 100px;
        width: 400px;
    }

    .gywm-right h2 {
        font-size: 38px;
        font-weight: 600;
        color: #333;
        margin: 20px 0 10px;
    }

    .gywm-right h3 {
        font-size: 20px;
        font-weight: 600;
        color: #aaaaaa;
        margin: 0 0 10px;
    }

    .gywm-banner img {
        max-width: 100%;
        height: auto;
        margin-bottom: 20px;
    }

    .gywm-content {
        text-align: center;
        margin-bottom: 100px;
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        justify-content: center;
    }


    .gywm-content p {
        display: block;
        font-size: 16px;
        line-height: 1.75;
        margin-bottom: 40px;
        text-align: left;
        margin-top: 20px;
    }

}

@media screen and (min-width: 1025px) {
    .rjxt-card-title {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        height: 30px;
        margin-top: -50px;
    }

    .gywm-card {
        display: flex;
    }

    .gywm-card-footer {
        height: 200px;
    }

    :deep(.el-card) {
        --el-card-border-color: #fff !important;
        width: 14rem;
        margin-left: 30px;
    }

    .rjxt-card-p {
        height: 120px;
        word-wrap: break-word;
        text-align: center;
        font-size: 14px;
        font-weight: normal;
        margin-top: 30px;
        line-height: 1.75;
        color: black;
    }

    .lxwm-form {
        padding: 20px;
        margin-left: 130px;
    }

    .el-form-item {
        margin-bottom: 20px;
    }

    .el-input,
    .el-checkbox-group {
        width: 100%;
    }

    .el-button {
        display: block;
        margin: 0 auto;
    }

    .lxwm-tel {
        display: flex;
        margin-left: 300px;
        margin-top: 50px;
    }

    .lxwm-tel-box {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        width: 1200px;
        justify-content: flex-start;
    }

    .lxwm-content-left {
        margin: 20px 0px;

        span {
            display: block;
            font-size: 20px;
            font-weight: 600;
            color: #333;
        }
    }

    .lxwm-content {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
    }

    .demo-form-inline .el-input {
        --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
        --el-select-width: 220px;
    }

    .gywm-content-box4 {
        margin-top: 50px;
    }

    .gywm-content-box2 {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        justify-content: center;
        margin-bottom: 50px;
    }

    .qjkh-box-bottom {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        width: 800px;
        gap: 20px;
        justify-content: center;
        align-content: center;
        align-items: center;
        justify-items: center;
    }

    .qjkh-box-bottom img {
        margin-top: 34px;
        max-width: 100%;
        height: auto;
    }

    .qjkh-box {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .gywm-steps-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        align-content: center;
        margin-top: 15px;
    }

    .left-align {
        text-align: right;
    }

    :deep(.left-align .el-step__main) {
        margin-left: -440px;
        /* 调整这个值以适应你的布局 */
    }


    .gywm-steps-content span {
        display: block;
        width: 400px;
        font-size: 14px;
        line-height: 1.75;
        color: #333;
    }

    .gywm-steps-content img {
        width: 400px;
        height: 334px;
        margin-top: 15px;
        margin-bottom: 40px;
    }

    :deep(.el-step__title) {
        font-weight: bold;
        font-size: 30px;
    }

    :deep(.el-step__num) {
        display: none;
    }

    .gywm-steps {
        max-width: 600px;
        margin-top: 50px;
        margin-left: 436px;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    :deep(.el-button) {
        border-radius: 0;
        width: 150px;
        height: 40px;
        border: 1px solid #000;
    }

    :deep(.el-button:hover) {
        background-color: #409eff;
        ;
        color: #fff;
    }

    .gywm-content-bottom-button {
        margin-top: 50px;
    }

    .gywm-content-bottom {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: space-around;
        margin-top: 47px;
        align-items: center;
        width: 1100px;
        flex-wrap: wrap;
    }

    .gywm-content-bottom img {
        margin-top: 34px;
    }


    .gywm-content-bottom {
        display: flex;
    }

    .gywm-content-top h2 {
        font-size: 38px;
        font-weight: 600;
        color: #333;
        margin: 50px 0 10px;
    }

    .gywm-content-top h3 {
        font-size: 20px;
        font-weight: 600;
        color: #aaaaaa;
        margin: 0 0 10px;
    }


    .gywm-section-arrow {
        font-size: 20px;
        font-weight: normal;
        color: #999999;
        position: absolute;
        bottom: -10px;
        left: 115px;
        transition: background-color 0.3s, color 0.3s;
        background-color: transparent;
        padding: 5px;
        width: 60px;
    }

    .gywm-section-arrow:hover {
        color: #fff;
        /* 悬停时箭头变白色 */
        background-color: #000;
        /* 悬停时背景变黑色 */
    }

    .gywm-content-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .gywm-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        height: 539px;
    }

    .gywm-left img {
        padding-bottom: 30px;
    }

    .gywm-right {
        display: flex;
        height: 539px;
        flex-direction: column;
        align-items: flex-start;
        align-content: center;
        justify-content: flex-start;
        margin-left: 82px;
        width: 400px;
    }

    .gywm-right h2 {
        font-size: 38px;
        font-weight: 600;
        color: #333;
        margin: 20px 0 10px;
    }

    .gywm-right h3 {
        font-size: 20px;
        font-weight: 600;
        color: #aaaaaa;
        margin: 0 0 10px;
    }

    .gywm-banner img {
        max-width: 100%;
        height: auto;
        margin-bottom: 20px;
    }

    .gywm-content {
        text-align: center;
        margin-bottom: 100px;
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        justify-content: center;
    }


    .gywm-content p {
        display: block;
        font-size: 16px;
        line-height: 2;
        margin-bottom: 40px;
        text-align: left;
    }


}
</style>
